import * as React from 'react'
import { Tabs, Toast } from 'antd-mobile'
import { FlatList, Item, Icon, NavBar } from 'components'
import './MyBeansOrder.less'
import { post, NotBean } from '../../../../utils'

const all = require('../../../../assets/arrow_s_all.png')
const top = require('../../../../assets/arrow_s_top.png')
const bot = require('../../../../assets/arrow_s_bot.png')

export default class MyBeansOrder extends React.Component<any, any> {

    public state = {
        activeZK: false,
        activeZKNext: false,
        activeNumber: false,
        activeNumberNext: false,
        sourceData: []
    }

    private node: any

    private params: any = {}

    private index: number = 1

    public render(): JSX.Element {
        const { activeZK, activeZKNext, activeNumber, activeNumberNext, sourceData } = this.state
        const tabs = [
            { title: '综合' },
            { title: <span>折扣 <img className="img_row myBeansOrder_tab_screen" src={activeZK ? activeZKNext ? bot : top : all} /></span>, key: 'zk' },
            { title: <span>数量 <img className="img_row myBeansOrder_tab_screen" src={activeNumber ? activeNumberNext ? bot : top : all} /></span>, key: 'number' }
        ]
        return (
            <div className="myBeansOrder">
                <NavBar
                    title="恒豆订单"
                    fixed={true}
                    divider={true}
                />
                {/* <div style={{height: '2.5rem'}} /> */}
                <Tabs
                    tabBarUnderlineStyle={{ border: 0 }}
                    tabBarInactiveTextColor="#333333"
                    tabBarActiveTextColor="#fa0000"
                    tabBarTextStyle={{
                        fontSize: '0.75rem'
                    }}
                    swipeable={false}
                    tabs={tabs}
                    onTabClick={this.handleChange}
                    prerenderingSiblingsNumber={0}
                >
                    <div className="myBeansOrder_contentWrap">
                        <FlatList
                            data={sourceData}
                            onRefresh={this.getData}
                            ListEmptyComponent={NotBean}
                            ref={(e: any) => { this.node = e }}
                            renderItem={(item: any, index: number) => {
                                return (
                                    <div className="myBeansOrder_contentWrap_content" key={index} onClick={() => {this.goToUrl('/My/orderDetail/' + item.id)}}>
                                        <Item 
                                            className={`myBeansOrder_contentWrap_content_item myBeansOrderBg_${Math.round(item.discount) + 1}`} 
                                            title={<div className="myBeansOrder_contentWrap_content_title">订单号：{item.order_no}</div>} 
                                            value={<div>
                                                <Icon className="myBeansOrder_contentWrap_content_icon" type="arrow_right" />
                                            </div>} 
                                        />
                                        <div className="myBeansOrder_contentWrap_text">
                                            <p>
                                                <img src={require('../../../../assets/beans.png')} />
                                                <span className="myBeansOrder_contentWrap_text_title">购买数量：</span>
                                                <span className="myBeansOrder_contentWrap_text_value">{item.gmprice} 恒豆</span>
                                            </p>
                                            <p>
                                                <Icon type="time_circle" className="myBeansOrder_contentWrap_text_timeIcon" />
                                                <span className="myBeansOrder_contentWrap_text_title">购买日期：</span>
                                                <span className="myBeansOrder_contentWrap_text_value">{item.pay_time}</span>
                                            </p>
                                        </div>
                                    </div>
                                )
                            }}
                        />
                    </div>
                </Tabs>

            </div>
        )
    }

    private getData = (finishLoad: () => void) => {
        const { userInfo } = this.props
        if (this.index === 1) {
            Toast.loading('', 0)
        }
        post('beanapi/beanOrderList', {
            ...this.params,
            userId: userInfo.id,
            page: this.index
        }).then((data: any) => {
            if (this.index === 1) {
                setTimeout(() => { Toast.hide(); this.setState({ sourceData: data.data }); finishLoad() }, 500)
            } else {
                if (data.data.length) {
                    const { sourceData } = this.state
                    this.setState({
                        sourceData: sourceData.concat(data.data)
                    })
                    finishLoad()
                }
            }
            this.index++
        })
    }

    private handleChange = (data: any) => {
        this.index = 1
        this.setState({
            activeZK: false,
            activeZKNext: false,
            activeNumber: false,
            activeNumberNext: false
        })
        this.params = {}
        if (data.key === 'zk') {
            this.params = {
                by: 'discount',
                sort: 'ASC'
            }
            const { activeZK, activeZKNext } = this.state
            this.setState({
                activeZK: true,
                activeNumber: false,
                activeNumberNext: false
            })
            if (activeZK) {
                if (!activeZKNext) {
                    this.params = {
                        by: 'discount',
                        sort: 'DESC'
                    }
                }
                this.setState({
                    activeZKNext: !activeZKNext
                })
            }
        }
        if (data.key === 'number') {
            const { activeNumber, activeNumberNext } = this.state
            this.params = {
                by: 'gmprice',
                sort: 'ASC'
            }
            this.setState({
                activeNumber: true,
                activeZK: false,
                activeZKNext: false
            })
            if (activeNumber) {
                if (!activeNumberNext) {
                    this.params = {
                        by: 'gmprice',
                        sort: 'DESC'
                    }
                }
                this.setState({
                    activeNumberNext: !activeNumberNext
                })
            }
        }
        this.getData(this.node.finishLoad)
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
}